【Vue全家桶】模板语法 |
您所在的位置：网站首页 › js formatdate › 【Vue全家桶】模板语法 |
【Vue全家桶】模板语法
|
【Vue全家桶】模板语法
文章目录
【Vue全家桶】模板语法写在前面一、Mustache语法二、事件处理2.1事件修饰符2.2键盘事件
三、常见的基本指令3.1 v-once3.2 v-text3.3 v-html3.4 v-pre
四、Vue绑定属性4.1 v-bind4.2 v-on4.3 v-model
五、列表渲染5.1 v-for5.1.1 `v-for`与数组5.1.2 `v-for`与对象5.1.3 在`v-for`里使用范围值
5.2 VNode与虚拟DOM5.3. v-for中key属性的作用
六、条件渲染6.1 v-if、v-show6.2 v-show和v-if的区别
写在前面
这里是前端程序员小张🫡 创作不易，希望各位大佬支持一下🌟 一、Mustache语法最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)： 基本使用 双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。 Message: {{ msg }} 表达式 计数双倍: {{ counter * 2 }} 三元运算符 {{ age >= 18? "成年人": "未成年人" }} 调用methods中的函数 {{ formatDate(time) }} 但是不能定义语句 二、事件处理 2.1事件修饰符.prevent：阻止默认事件 .stop：阻止事件冒泡 .once：事件只触发一次 .capture：使用事件的捕获模式 .self：只有event.target是当前操作的元素时才触发事件 .passive：事件的默认行为立即执行，无需等待事件回调执行完毕 2.2键盘事件 vue中常用的按键别名： 回车 => enter 删除=> delete 退出=> esc 空格=> space 换行=> tab （特殊，必须配合keydown去使用） 上下左右=> up down left right vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名） 三、常见的基本指令 3.1 v-oncev-once指令： v-once所在节点在初次动态渲染后，就视为静态内容了以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能 3.2 v-textv-text 用于更新元素的 textContent 3.3 v-html默认情况下，如果我们展示的内容本身是 html 的，那么vue并不会对其进行特殊的解析。 如果我们希望这个内容被Vue可以解析出来，那么可以使用 v-html 来展示；
v-pre指令： 跳过其所在结点的编译过程可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译 四、Vue绑定属性 除了内容需要动态决定外，某些属我们也希望动态来绑定 比如动态绑定a元素的href属性比如动态绑定img元素的src属性Vue中有两种数据绑定的方法： 单向绑定（v-bind）：数据只能从data流向页面双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data 4.1 v-bind 缩写：：预期：any（with argument）|object（without argument）参数：attOrProp（optional）用法：动态的绑定一个或多个attribute，或一个组件prop到表达式 图片的链接src、网站的链接href、动态绑定一些类、样式等等举个栗子：点击按钮切换图片 切换图片举个栗子：v-bind直接绑定对象 hello world // 使用Vue const app = Vue.createApp({ data() { return { infos: { name: "zhang", age:20 } } }, }) app.mount("#app") 4.2 v-on 缩写：@期望的绑定值类型：Function | Inline Statement | Object (不带参数)参数：event（使用对象语法则为可选项）修饰符： .stop ——调用 event.stopPropagation()。.prevent ——调用 event.preventDefault()。.capture ——在捕获模式添加事件监听器。.self ——只有事件从元素本身发出才触发处理函数。.{keyAlias} ——只在某些按键下触发处理函数。.once ——最多触发一次处理函数。.left ——只在鼠标左键事件触发处理函数。.right ——只在鼠标右键事件触发处理函数。.middle ——只在鼠标中键事件触发处理函数。.passive ——通过 { passive: true } 附加一个 DOM 事件。当通过methods中定义方法，以供@click调用时，需要注意参数问题： 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件 4.3 v-model在表单输入元素或组件上创建双向绑定。 期望的绑定值类型：根据表单输入元素或组件输出的值而变化 仅限 components修饰符： .lazy 默认情况下，v-model在进行双向绑定时，绑定的是input事件，那么会在每次内容输入后就将最新的值和绑定的属性进行同步如果我们在v-model后跟上lazy修饰符，那么会将绑定的事件切换为change事件，只有在提交时（比如回车）才会触发.number——将输入的合法符串转为数字 .trim——移除输入内容两端空格 五、列表渲染 5.1 v-for基于原始数据多次渲染元素或模板块。 期望的绑定值类型：Array | Object | number | string | Iterable详情信息： 指令值必须使用特殊语法alias in expression为正在迭代的元素提供一个别名也可以为索引指定别名（如果用在对象，则是键值） 5.1.1 v-for与数组我们可以使用v-for指令基于一个数组来渲染一个列表。v-for指令的值需要使用item in items形式的特殊语法，其实items是源数据的数组，而item是迭代器的别名： data() { return { names:["BAEK HYUN","SUHO","SEHUN"] } } {{name}}在v-for块中可以完整地访问父级作用域内的属性和变量。v-for也支持可以使用可选的第二个参数表示当前项的位置索引。 {{index}}--{{name}} 5.1.2 v-for与对象我们也可以使用v-for来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用object.keys()的返回值来决定。 data() { return { person: { name: 'SEHUN', age:30, occupation:'singer' } } } {{value}}可以通过提供第二个参数表示属性名： {{key}}:{{value}}第三个参数表示位置索引： {{index}}-{{key}}:{{value}} 5.1.3 在v-for里使用范围值v-for可以直接接受一个整数值。在这种用例中，会将该模块基于1.....n的取值范围重复多次。 {{ n }} 5.2 VNode与虚拟DOM VNode的全称是Virtual Node，也就是虚拟节点事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNodeVNode的本质是一个JavaScript的对象虚拟DOM：就是一个普通的 JavaScript 对象，包含了 tag、props、children 三个属性，以这三个属性来描述一个DOM节点，每组描述就是一个VNode，整个VNode的集合就是一个虚拟DOM树。 当有一大堆的元素时，他们就会形成一个VNode Tree VDOM 其实就是多个 VNode 组成的树结构，这就好比 HTML 元素和 DOM 树之间的关系：多个 HTML 元素能够组成树形结构就称之为 DOM 树. 5.3. v-for中key属性的作用在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性，key是给每个VNode的唯一id，也是diff算法的一种优化策略，可以根据key，更准确，更快的找到对应的VNode节点。 key这个特殊的 attribute 主要作为 Vue 的虚拟 DOM 算法提示，在比较新旧节点列表时用于识别 vnode。在没有 key 的情况下，Vue 将使用一种最小化元素移动的算法，并尽可能地就地更新/复用相同类型的元素。如果传了 key，则将根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素。有相同父元素的子元素必须有唯一的 key。重复的 key 会造成渲染错误。 六、条件渲染 6.1 v-if、v-showv-if、v-else、v-else-if用于根据条件来渲染某一块的内容： 这些内容只有在条件为true时，才会被渲染出来；这三个指令与JavaScript的条件语句if、else、else if类似；v-show v-show和v-if的用法看起来是一致的，也是根据一个条件决定是否显示元素或者组件。 6.2 v-show和v-if的区别 在用法上的区别： v-show是不支持template；v-show不可以和v-else一起使用； 本质上的区别： v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换；v-if当条件为false时，其对应的原生压根不会被渲染到DOM中； 开发中如何进行选择呢？ 如果我们的原生需要在显示和隐藏之间频繁的切换，那么使用v-show；如果不会频繁的发生切换，那么使用v-if； |
【本文地址】